i{
  font-style: normal;
}
*{
  padding: 0;
  margin: 0;
}
body{
  font-family: '微软雅黑';
  background-color: #fff;
}
h1,h2,h3,h4,h5,h6{
  font-weight: normal;
}
ul,ol,dl{
  list-style: none;
}
a{
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  &:active{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

}
img{
  display: block;
  border: none;
}
input{
  border: none;
  background: none;
  outline: none;
  display: block;
}
textarea{
  resize: none;
  border: none;
  background: none;
  outline: none;
  display: block;
}
button{
  border: none;
  background: none;
  outline: none;
  display: block;
}
.clearFix:before,
.clearFix:after{
  content: '';
  width: 0;
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
}
.container{
  padding: 0 .2rem;
  overflow: hidden;
}
.header {
  width: 7.1rem;
  padding: .14rem .2rem;
  background: #4383ef;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  .scanning {
    float: left;
    width: .76rem;
    text-align: center;
    img {
      margin-left: .18rem;
      width: .38rem;
      height: .38rem;
    }
    span {
      font-size: .24rem;
      color: #fdfdfd;
      display: block;
    }
  }
  .search {
    float: left;
    width: 4.75rem;
    position: relative;
    height: .6rem;
    border-radius: 3px;
    background: #ffffff url("../img/bg01.png") no-repeat .18rem;
    background-size: .34rem;
    margin-left: .47rem;
    input {
      margin-left: .7rem;
      width: 3.6rem;
      height: .6rem;
      display: block;
      line-height: .6rem;
      color: #bcbcbc;
      font-size: .24rem;
      &::placeholder {
        color: #bcbcbc;
        font-size: .24rem;
      }
    }
    button {
      position: absolute;
      top: 50%;
      margin-top: -.1rem;
      right: .22rem;
      width: .2rem;
      height: .2rem;
      background: url("../img/bg02.png") no-repeat;
      background-size: .2rem;
    }

  }
  .theMessage {
    float: right;
    width: .65rem;
    text-align: center;
    img {
      margin-left: .15rem;
      width: .38rem;
      height: .38rem;
    }
    span {
      font-size: .24rem;
      color: #fdfdfd;
      display: block;
    }
  }
}
.footer{
  background: #4383ef;
  height: .98rem;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999999;
  width: 100%;
  .footerNav{
    padding-left: .57rem;
    li{
      width: 1rem;
      padding-top: .62rem;
      float: left;
      margin-right: .31rem;
      display: block;
      line-height: .36rem;
      text-align: center;
      background-image: url("../img/xuebi01.png");
      background-repeat: no-repeat;
      background-position: 0 .08rem ;
      background-size: 5rem .51rem;
      position: relative;
      a{
        font-size: .26rem;
        color: #fff;
        display: block;
        width: 100%;
        height: 100%;
      }
      &:nth-of-type(2){
        background-position: -1rem .08rem ;
      }
      &:nth-of-type(3){
        background-position: -2rem .08rem ;
      }
      &:nth-of-type(4){
        background-position: -3rem .08rem ;
      }
      &:nth-of-type(5){
        background-position: -4rem .08rem ;
      }
      .Angle {
        width: 0;
        height: 0;
        border-top: .06rem solid transparent;
        border-right: .07rem solid #989897;
        border-bottom: 0 solid transparent;
        position: absolute;
        top: -.06rem;
        left: -.07rem;
        display: none;
      }
      .exceeded{
        display: none;
        width: 1rem;
        height:.06rem;
        background: #eba51e;
        position: absolute;
        left: 0;
        top: -.06rem;
      }
      &.on{
        background-color: #eba51e;
        .Angle,
        .exceeded{
          display: block;
        }
      }
    }
  }
}
